<template>
  <div class="WorkingSchedule" v-loading="loading">
    <el-form ref="form" :model="form" label-position="top" class="myform">
      <div>
        <el-form-item label="合同编号" class="myform-item">
          <el-input
            v-model="form.factory_contract_no"
            placeholder="请输入合同编号"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="款号" class="myform-item">
          <el-input
            v-model="form.type_no"
            placeholder="请输入款号"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="工厂" class="myform-item">
          <el-input
            v-model="form.factory_name"
            placeholder="请输入工厂名"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="扣款状态" class="myform-item">
          <el-select
            v-model="form.k_status"
            placeholder="请选择扣款状态"
            @keyup.enter.native="onSearch"
            clearable
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态" class="myform-item">
          <el-select
            v-model="form.status"
            placeholder="请选择"
            clearable
            @keyup.enter.native="onSearch"
          >
            <el-option
              v-for="item in Shoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-top: 50px" class="myform-item">
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </div>
      <!-- <div>
        <el-form-item style="margin-top: 50px" class="myform-item">
          <el-button type="primary" @click="onPenalty()">添加违约金/赔偿金</el-button>
        </el-form-item>
      </div> -->
    </el-form>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column
        label="创建人"
        align="center"
        prop="adduser"
      ></el-table-column>
      <el-table-column
        label="工厂"
        align="center"
        prop="factory_name"
      ></el-table-column>
      <el-table-column
        label="合同号"
        align="center"
        prop="factory_contract_no"
      ></el-table-column>
      <el-table-column
        label="款号"
        align="center"
        prop="type_no"
      ></el-table-column>
      <el-table-column
        label="违约金/赔偿金金额"
        align="center"
        prop="amount"
      ></el-table-column>
      <el-table-column
        label="违约金/赔偿金原因"
        align="center"
        prop="reason"
      ></el-table-column>
      <el-table-column label="扣款状态" align="center" prop="k_status">
        <template slot-scope="{ row }">
          <div
            :style="{
              color:
                row.k_status == 2
                  ? '#67C23A'
                  : row.k_status == 1 && row.k_status == 0
                  ? '#2c70d6'
                  : '',
            }"
          >
            {{
              row.k_status == 0
                ? "未扣款"
                : row.k_status == 1
                ? "未扣款"
                : row.k_status == 2
                ? "已扣款"
                : ""
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="违约金/赔偿金申请日期"
        align="center"
        prop="createtime"
      ></el-table-column>
      <el-table-column
        label="违约金/赔偿金日期"
        align="center"
        prop="kou_time"
      ></el-table-column>
      <el-table-column
        label="违约金/赔偿金理由"
        align="center"
        prop="remarks"
      ></el-table-column>
      <el-table-column label="图片" align="center" prop="images">
        <template slot-scope="{ row }">
          <el-image
            v-for="(item, idx) in row.images"
            :key="idx"
            :src="item.url"
            style="width: 100px; height: 100px"
            :preview-src-list="[item.url]"
          >
          </el-image>
        </template>
      </el-table-column>

      <el-table-column label="审核状态" align="center" prop="status">
        <template slot-scope="{ row }">
          <div
            :style="{
              color:
                row.status == 2 || row.status == 3
                  ? 'red'
                  : row.status == 1
                  ? '#67C23A'
                  : row.status == 0
                  ? '#F7C443'
                  : '',
            }"
          >
            {{
              row.status == 0
                ? "待审核"
                : row.status == 1
                ? "已通过"
                : row.status == 2
                ? "未通过"
                : row.status == 3
                ? "已作废"
                : row.status == 4
                ? "已撤回"
                : ""
            }}
          </div>
          <div>
            <el-button
              type="text"
              size="default"
              @click="onLookRun(row.id, 3, row.run_id)"
              v-if="row.run_id"
              >审批进度</el-button
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="审核时间"
        align="center"
        prop="examinetime"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <!-- <template slot-scope="{ row }">
          <el-button
            type="text"
            size="default"
            v-if="row.status == 0"
            @click="onAudit(row)"
            >审核</el-button
          >
        </template> -->
      </el-table-column>
    </el-table>
    <pagination
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postAdminPricingGetFineAmountList"
    />
    <!-- 审核 -->
    <el-dialog
      title="审核"
      :visible.sync="auditdialogVisible"
      :lose-on-click-modal="false"
      width="30%"
    >
      <div>
        <el-radio v-model="PenaltyAudit.status" :label="1">通过</el-radio>
        <el-radio v-model="PenaltyAudit.status" :label="0">拒绝</el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="auditdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onPenaltyAuditAffirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 违约金/赔偿金 -->
    <el-dialog
      title="违约金/赔偿金申请"
      :visible.sync="penaltydialogVisible"
      :lose-on-click-modal="false"
      width="30%"
    >
      <el-form
        :model="penaltyForm"
        :rules="rulespenaltyForm"
        ref="penaltyForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="工厂" prop="plant">
          <el-select
            v-model="penaltyForm.factory_name"
            placeholder="请选择款号"
          >
            <el-option
              v-for="(item, index) in factoryList"
              :key="index"
              :label="item.factory_name"
              :value="item.factory_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="违约金/赔偿金原因" prop="cause">
          <el-select
            v-model="penaltyForm.reason"
            placeholder="请选择违约金/赔偿金原因"
          >
            <el-option
              v-for="(item, index) in reasonList"
              :key="index"
              :label="item.title"
              :value="item.title"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="违约金/赔偿金金额" prop="gold">
          <el-input
            v-model="penaltyForm.amount"
            type="number"
            placeholder="请输入违约金/赔偿金金额"
          ></el-input>
        </el-form-item>
        <el-form-item label="违约金/赔偿金备注" prop="remark">
          <el-input
            v-model="penaltyForm.remarks"
            type="textarea"
            placeholder="请输入违约金/赔偿金备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="penaltydialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onPenaltyAffirm('penaltyForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  postAdminPricingGetFineAmountList,
  postAdminPricingExamineFineAmount,
  postAdminPricingGetReason,
  postHomeCodeGetFactory,
  postAdminPricingAddFineAmount,
} from "@/api";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      loading: false,
      auditdialogVisible: false, //审核
      penaltydialogVisible: false, // 违约金/赔偿金
      reasonList: [],
      factoryList: [],
      options: [
        {
          label: "未扣款",
          value: 1,
        },
        {
          label: "已扣款",
          value: 2,
        },
      ],
      Shoptions: [
        {
          label: "未审核",
          value: 0,
        },
        {
          label: "已通过",
          value: 1,
        },
        {
          label: "未通过",
          value: 2,
        },
        {
          label: "已作废",
          value: 3,
        },
        {
          label: "已撤回",
          value: 4,
        },
      ],
      form: {
        factory_name: "",
        factory_contract_no: "",
        type_no: "",
        k_status: "",
        status: "",
        page: 1,
        size: 10,
      },
      tableData: [],
      total: 1,
      // 违约金/赔偿金
      penaltyForm: {
        type: 2,
        factory_name: "",
        reason: "",
        amount: "",
        remarks: "",
      },
      rulespenaltyForm: {
        factory_name: [
          { required: true, message: "请选择工厂", trigger: "blur" },
        ],
        reason: [
          {
            required: true,
            message: "请选择违约金/赔偿金原因",
            trigger: "blur",
          },
        ],
        amount: [
          {
            required: true,
            message: "请输入违约金/赔偿金金额",
            trigger: "blur",
          },
        ],
        remarks: [
          {
            required: true,
            message: "请输入违约金/赔偿金备注",
            trigger: "blur",
          },
        ],
      },
      // 审核
      PenaltyAudit: {
        id: "",
        status: 1,
      },
    };
  },
  activated() {
    let form = this.form;
    this.postAdminPricingGetFineAmountList(form);
    this.postHomeCodeGetFactory();
    this.postAdminPricingGetReason();
  },
  methods: {
    // 审批进度
    onLookRun(id, type, run_id) {
      this.$router.push({ name: "contractrunid", query: { id, type, run_id } });
    },
    // 加工厂列表
    postHomeCodeGetFactory() {
      let obj = {
        page: 1,
        size: 1000,
      };
      postHomeCodeGetFactory(obj).then((res) => {
        this.factoryList = res.data;
      });
    },
    // 违约金/赔偿金原因
    postAdminPricingGetReason() {
      postAdminPricingGetReason().then((res) => {
        this.reasonList = res.data;
      });
    },
    //   违约金/赔偿金
    onPenalty(e) {
      this.penaltydialogVisible = true;
    },
    // 创建违约金/赔偿金
    onPenaltyAffirm(formName) {
      let that = this;
      let obj = this.penaltyForm;
      let form = this.form;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          postAdminPricingAddFineAmount(obj).then((res) => {
            that.postAdminPricingGetFineAmountList(form);
            that.$message({
              type: "success",
              message: `违约金/赔偿金创建成功!`,
            });
            that.penaltydialogVisible = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //   审核
    onAudit(e) {
      this.PenaltyAudit.id = e.id;
      this.auditdialogVisible = true;
    },
    // 提交审核
    onPenaltyAuditAffirm() {
      let that = this;
      let obj = this.PenaltyAudit;
      let form = this.form;
      postAdminPricingExamineFineAmount(obj).then((res) => {
        that.postAdminPricingGetFineAmountList(form);
        that.$message({
          type: "success",
          message: `审核${obj.status == 1 ? "通过" : "不通过"}!`,
        });
        that.auditdialogVisible = false;
      });
    },
    // 采购列表
    async postAdminPricingGetFineAmountList(data) {
      this.loading = true;
      this.form = data;
      postAdminPricingGetFineAmountList(data)
        .then((res) => {
          this.loading = false;
          console.log("采购列表", res);
          this.tableData = res.data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 搜索
    onSearch() {
      this.form.page = 1;
      this.form.size = 10;
      this.postAdminPricingGetFineAmountList(this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.WorkingSchedule {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
}
</style>
